<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" class="demo-2 no-js">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath }/reception/css/main.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/reception/css/style.css"><!-- 导航 -->
	<!-- <link rel="stylesheet" href="css/LunboStyle.css"> --><!-- 轮播图 -->
	<!-- 下列都是菜名的悬停显示 -->
	<script src="${pageContext.request.contextPath }/reception/js/jquery.1.4.2-min.js"></script>
	<meta name="description" content="Hover Effects with animated SVG Shapes using Snap.svg" />
	<meta name="keywords" content="animated svg, hover effect, grid, svg shape html, " />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/reception/css/component.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/reception/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/reception/css/demo.css" />
	<!-- 购物车界面 -->
	<link href="${pageContext.request.contextPath }/reception/css/shopCar.css" rel="stylesheet" type="text/css" />
	<!--[if IE]>
		<script src="js/html5.js"></script>
	<![endif]-->
</head>
<script type="text/javascript">
function f(d,typeid){
	var pageNum = $.trim($(d).text());
	$.ajax({
		url:"${pageContext.request.contextPath}/food/pageFindAll.do",
		type:"POST",
		data:{
			'pageNum':pageNum,
			'typeid':typeid
		},
		dataType:"json",
		success:function(data){
			//确定菜系id
			for(var i = typeid*10;i < typeid*10+data.length;i++) {
				var j=$("#"+i);

				j.parent().parent().show();
				j.parent().attr("fid",data[i%10].id);
				j.children("h2").text(data[i%10].foodname);
				j.children("p").text(data[i%10].remark);

			}
			for(var i = typeid*10+data.length;i < typeid*10+4;i++) {
				var j=$("#"+i);
				j.parent().parent().hide();
			}
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert("服务器异常");
		}
	});
	return false;
}

		
		
	
	
	function add(t){
		var fid=$(t).parent().parent().attr("fid");
		$.ajax({
			url:"${pageContext.request.contextPath}/cart/addCart.do",
			type:"POST",
			data:{
				'id':fid,
				'count':'1',
			},
			dataType:"json",
			success:function(data){
				$("#cart").children().remove();
				alert("已添加到购物车");
				for(var i = 0; i < data.cartItems.length;i++){
						$("#cart").append("<table cellpadding='0' cellspacing='0' class='gwc_tb2'><tr>"+
						"<td class='tb2_td1'><input type='checkbox' value='1' name='newslist' id='newslist-1' /></td>"+
						"<td class='tb2_td2'><a href='#'><img src='images/img1.jpg'/></a></td>"+
						"<td class='tb2_td3'><a href='#'>"+data.cartItems[i].food.foodname+"</a></td>"+
						"<td class='tb1_td4'><label id='nums1' class='tot' style='color:#ff5500;font-size:14px; font-weight:bold;'>"+data.cartItems[i].foodCount+"</label>件</td>"+
						"<td class='tb1_td5'>"+
						"<input id='min1' name=''  style=' width:20px; height:18px;border:1px solid #ccc;' type='button' value='-' />"+
							"<input id='text_box1' name='' type='text' value='"+data.cartItems[i].foodCount+"' style=' width:30px; text-align:center; border:1px solid #ccc;' readonly />"+
							"<input id='add1' name='' style=' width:20px; height:18px;border:1px solid #ccc;' type='button' value='+' />"+
						"</td>"+
						"<td class='tb1_td6'><label id='total1' class='tot' style='color:#ff5500;font-size:14px; font-weight:bold;'>"+data.cartItems[i].subtotal+"</label></td>"+
						"<td class='tb1_td7'><a href='#' class='del' onclick='removeSorder(this)' lang='"+data.cartItems[i].food.id+"'>删除</a></td>"+
					"</tr>"+
				"</table>");
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("服务器异常");
            }
		});
		return false;
	}
	
	function removeSorder(node){
		var id = node.lang;
		if(confirm("您确定要删除这条数据") == true){ 
			$.ajax({
				url:"${pageContext.request.contextPath}/cart/removeCart.do",
				type:"GET",
				data:{'id':id},
				dataType:"text",
				success:function(data) {
					if(data == "success") {
						$(node).parent().parent().remove();
						alert("删除成功！");
					}
				},
				error:function() {
					alert("服务器错误");
				}
			});
		} 
	}
	
	/* function findType(node){
		//$(node).append("<option value='1'>asdsadas</option>");
		$.ajax({
			url:"${pageContext.request.contextPath}/dinnertable/ajaxFindAll.do",
			type:"POST",
			data:{
				
			},
			dataType:"json",
			success:function(data){
				for(var i = 0;i < data.length;i++) {
					$(node).html("<option value='"+data[i].id+"'>"+data[i].tablename+"</option>");
				}
				
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("服务器异常");
            }
		});
	} */
	
	//购物车
	function shop(){
		var a = document.getElementById('windowContext');
		var b = document.getElementById('registerWindow');
		var c = document.getElementById('loginWindow');
		var d = document.getElementById('shopcar');
		a.style.display = "block";
		b.style.display = "none";
		c.style.display = "none";
		d.style.display = "block";
		$.ajax({
			url:"${pageContext.request.contextPath}/dinnertable/ajaxFindAll.do",
			type:"POST",
			data:{
				
			},
			dataType:"json",
			success:function(data){
				$(node).append("<option value=''>--请选择餐桌--</option>");
				for(var i = 0;i < data.length;i++) {
					$(node).append("<option value='"+data[i].id+"'>"+data[i].tablename+"</option>");
				}
				
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("服务器异常");
            }
		});
	}
</script>
<body>
	<!-- 全局导航 -->
	<div class="nav">
		<div class="nav_li">
			<ul>
				<c:forEach items="${findAllType }" var="typeList">
					<li><a href="#${typeList.id }">${typeList.typename }</a></li>
				</c:forEach>
			</ul>
		</div>
		<div id="loginContain">
			<div id="login" class="readyLR" onclick="loginClick()">
				登录
			</div>
			<div id="register" class="readyLR" onclick="registerClick()">
				注册
			</div>
		</div>
		<!-- 登录注册操作界面 -->
		<div id="windowContext">
				<div class="close" onclick="closeclick()">
					<img src="${pageContext.request.contextPath }/reception/images/close.png" alt="无法加载" width="65px" height="65px" />
				</div>
			<!-- 这里是登录界面 -->		
			<div id="loginWindow" class="commonWindow">
				<h3>登录天天快餐</h3>
				<form action="" method="post" >
					<label for="userid">
						登录名：<input type="text" placeholder="请输入登录名" id="userid" name="username" autofocus required pattern="(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23}">
					</label><br>
					<label for="pwid">
						密&nbsp码：<input type="password" placeholder="请输入密码" id="pwid" name="pwname" required>
					</label>
					<label>
						<div class="OKbtn" >
							<input type="submit" value="立即登录" id="logid" class="subname">
						</div>
					</label>
				</form>
			</div>
			<div id="registerWindow" class="commonWindow">
				<!-- 这里是注册界面 -->
				<h3>注册天天快餐账号</h3>
				<form action="" method="post" onSubmit="return repwequal()">
					<label for="reuserid">
						注册名&nbsp：<input type="text" placeholder="请输入至少4位数字和字母组合" id="reuserid" name="username" autofocus required pattern="(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23}">
					</label><br>
					<label for="repwid">
						密&nbsp&nbsp码：<input type="password" placeholder="请输入密码" id="repwid" name="pwname" required>
					</label><br>
					<label for="renewpwid">
						确认密码：<input type="password" placeholder="请重新输入密码" id="renewpwid" name="pwname" required>
					</label><br>
					<label for="emailid">
						邮&nbsp&nbsp箱：<input type="email" placeholder="请输入邮箱" id="emailid" name="emailname">
					</label><br>
					<label for="realnameid">
						真实名&nbsp：<input type="text" placeholder="请输入姓名" id="realnameid" name="realname">
					</label>
					<label>
						<div class="OKbtn">
							<input type="submit" value="立即注册" id="regid" class="subname">
						</div>
					</label>
				</form>
			</div>
		</div>
		
	</div>
	<!-- 轮播图 -->
	<iframe src="${pageContext.request.contextPath }/reception/LunBo.html" scrolling="no" width="100%" height="500px" frameborder="0"></iframe>
	<!-- 徽菜 -->
	<c:forEach items="${findAllType }" var="typeList">
	<div class="food first" id="${typeList.id }">
		<!-- 菜名内容 -->
		<div class="putfood">
			<div class="container">
				<section id="grid" class="grid clearfix">
				<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
					<figure fid="1"><!-- 此处id为要替换的目标，结构是typeid+index ,加号不要，index为0~3-->
						<img src="${pageContext.request.contextPath }/reception/images/${(idx1.index+1)*2}.png" />
						<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
						<figcaption id="1">
							<h2>12321</h2>
							<p>12312</p>
							<button onclick="return add(this)">点击添加</button>
						</figcaption>
					</figure>
				</a>
			<%-- <c:forEach items="${typeList.foods }" var="foodList" varStatus="idx1" begin="0" end="3">
					<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
						<figure fid="${foodList.id}"><!-- 此处id为要替换的目标，结构是typeid+index ,加号不要，index为0~3-->
							<img src="${pageContext.request.contextPath }/reception/images/${(idx1.index+1)*2}.png" />
							<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
							<figcaption id="${typeList.id }${idx1.index}">
								<h2>${foodList.foodname }</h2>
								<p>${foodList.remark }</p>
								<button onclick="return add(this)">点击添加</button>
							</figcaption>
						</figure>
					</a>
			</c:forEach>
 --%>
				</section>
			</div>
		</div>
		<!-- 翻页 -->
		<div class="putdot">
			<nav class ="dot">
				<c:forEach items="${typeList.foods}" var="foodList" varStatus="idx">
					<c:if test="${(idx.index)%4==0}">
						<a onclick="return f(this,${typeList.id})">
							<fmt:formatNumber type="number" value="${(idx.index + 4)/4}" maxFractionDigits="0"/>
						</a>
					</c:if> 
				</c:forEach>
				
			</nav>
		</div>
	</div>
	</c:forEach>
	
	<!-- 购物车按钮 -->
		<div id="shopbtn" onclick="shop()">
			<img src="${pageContext.request.contextPath }/reception/images/shopcar.png" alt="无法加载" width="100px" height="
			100px">
		</div>
	<!-- 购物车界面 -->
		<div class="gwc" id="shopcar">
			<table cellpadding="0" cellspacing="0" class="gwc_tb1">
				<tr>
					<td class="tb1_td1"><input id="Checkbox1" type="checkbox"  class="allselect"/></td>
					<td class="tb1_td1">全选</td>
					<td class="tb1_td3">商品</td>
					<td class="tb1_td4">商品信息</td>
					<td class="tb1_td5">数量</td>
					<td class="tb1_td6">小计</td>
					<td class="tb1_td7">操作</td>
				</tr>
			</table>
			<!-- 商品1 -->
			<div id="cart">
				
			</div>
			<!-- <table cellpadding="0" cellspacing="0" class="gwc_tb2">
				<tr>
					<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
					<td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
					<td class="tb2_td3"><a href="#">产品标题</a></td>
					<td class="tb1_td4"><label id="nums1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label>件</td>
					<td class="tb1_td5">
						<input id="min1" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
						<input id="text_box1" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" readonly />
						<input id="add1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
					</td>
					<td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
					<td class="tb1_td7"><a href="#">删除</a></td>
				</tr>
			</table> 
			<!-- 总数 -->
			<table cellpadding="0" cellspacing="0" class="gwc_tb3">
				<tr>
					<td class="tb1_td1">&nbsp;</td>
					<td class="tb1_td1">
						<select onclick="findType(this)">
							<option value="" selected>--请选择餐桌--</option>
						</select>
					</td>
					<td class="tb3_td1">&nbsp;</td>
					<td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
					<td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></span></td>
					<td class="tb3_td4"><!-- <span id="jz1">结算</span> --><a href="${pageContext.request.contextPath }/Orders/callPay.do" >结算</a></td><!--style=" display:none;"  class="jz2" id="jz2"  -->
				</tr>
			</table>
		</div>
</body>
	<script src="${pageContext.request.contextPath }/reception/js/snap.svg-min.js"></script>
	<!-- <script src="${pageContext.request.contextPath }/reception/js/jquery-1.12.1.min.js"></script> -->

	
	<!-- 主题js代码 -->
	<script type="text/javascript" src = "${pageContext.request.contextPath }/reception/js/main.js"></script>
	<!-- 导航 -->
	<script type="text/javascript" src='${pageContext.request.contextPath }/reception/js/style.js'></script>
	<!-- 轮播图 -->
	<!-- <script type="text/javascript" src="js/LunboStyle.js"></script> -->
	<!-- 购物车界面-->
	<script type="text/javascript" src="${pageContext.request.contextPath }/reception/js/Calculation.js"></script>
</html>